<template>
  <div style="position: relative;">
    <div class="image" style="position:absolute; top:100px;left:40%">
      <img class src="../assets/logo.png" />
    </div>
    <div
      class="login-container"
      style="  width: 260px;
  height: 260px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-color: #f8f8f8;
  border: 1px solid #f1f1f1;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px;
  padding:30px 40px 10px 40px;
  position: absolute;
  top:300px;
  left:40%;

  "
    >
      <el-form ref="loginForm" :model="formLogin" size="default">
        <el-form-item prop="username">
          <el-input type="text" v-model="formLogin.username" placeholder="用户名">
            <i slot="prepend" class="fa fa-user-circle-o"></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="formLogin.password" placeholder="密码">
            <i slot="prepend" class="fa fa-keyboard-o"></i>
          </el-input>
        </el-form-item>

        <el-button
          size="medium"
          @click="submit"
          type="primary"
          class="button-login"
          style="display:block; margin-left:auto; margin-right:auto; margin-top:20px!important;"
        >登录</el-button>
      </el-form>
    </div>
  </div>
</template>


<script>
import { mapMutations } from "vuex";

export default {
  name: "login",
  data() {
    return {
      formLogin: {
        username: "",
        password: "",
        school: ""
      },
      options: []
    };
  },
  mounted: function() {
    this.getSeasondata(); //获取有效赛季信息
  },

  methods: {
    // 获取有效赛季信息
    getSeasondata() {
      let that = this;
      that.$api
        .getCompetitionInfo()
        .then(res => {
          let season_data = res.data.results;
          if (season_data) {
            let season = season_data[0];
            let seasonInfo = {
              seasonName: season.competition_name,
              seasonId: season.id,
              seasonDate: season.holding_time
            };
            that.setSeasoInfo(seasonInfo);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //登录
    submit() {
      const _this = this;
      let postData = this.$qs.stringify({
        username: _this.formLogin.username,
        password: _this.formLogin.password
      });
      _this.$api
        .login(postData)
        .then(function(response) {
          if (response.status == 200) {
            _this.$cookie.setCookie("token", response.data["token"], 7);
            _this.$cookie.setCookie("userid", response.data["user"]["id"]);
            _this.$cookie.setCookie( "school_id", response.data["user"]["school"]["id"]);
            _this.$cookie.setCookie("area_id",response.data["user"]["school"]["area"]["id"]);
            
            _this.changeName(response.data["user"]["username"]);
            _this.changeSchoolName(response.data["user"]["school"]["school_name"]);
            _this.changeArealName(response.data["user"]["school"]["area"]["area_name"]);
            _this.setSuperuser(response.data["user"]["is_superuser"]);

            // 把token存储到vuex里面 token绑定
            _this.$store.state.token = _this.$cookie.getCookie("token");
            _this.$store.state.userid = _this.$cookie.getCookie("userid");

            if (_this.$cookie.getCookie("token")) {
              _this.$router.push({ path: "/barlist" });
            }
          }
        })
        .catch(function(err) {
          console.log(err);
          _this.$message({
            type: "warning",
            message: err
          });
        });
    },
    ...mapMutations([
      "changeName",
      "changeSchoolName",
      "changeArealName",
      "setSuperuser",
      "setSeasoInfo"
    ])
  }
};
</script>


<style scoped>
.login-container {
  width: 260px;
  height: 260px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-color: #f8f8f8;
  border: 1px solid #f1f1f1;
  margin-left: auto;
  margin-right: auto;
  /* padding-top: 20px; */
  border-radius: 5px;
  padding: 30px 40px 10px 40px;
  /*  */
  /*  */
}

.image {
  width: 300px;
  /* display: inline-block; */
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
}

.image img {
  display: inline-block;
  width: 300px;
}
</style>
